<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 表单 -->
    <van-form @submit="register">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          disabled
          block
          type="warning"
          native-type="submit"
          v-if="username.length !== 11"
        >
          下一步
        </van-button>
        <van-button round block type="danger" native-type="submit" v-else>
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { showConfirmDialog } from "vant";
import { docheckphone } from "../../server/user";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useCounterStore } from "../../stores/counter";
let counterStore = useCounterStore();
let router = useRouter();
let username = ref("");
// 定义方法 返回
function onClickLeft() {
  router.go(-1);
}
// 定义方法
function register() {
  docheckphone({ tel: username.value }).then((res: any) => {
    if (res.code === "200") {
      showConfirmDialog({
        title: "提示",
        message: `将向手机号 ${username.value} 发送短信验证码`,
      })
        .then(() => {
          counterStore.setUsername(username.value);
          router.push("/messagecode");
        })
        .catch(() => {});
    } else {
      showConfirmDialog({
        title: "提示",
        message: "该账号以注册是否去登录",
      })
        .then(() => {
          router.push("/login");
        })
        .catch(() => {});
    }
  });
}
</script>

<style scoped>
.van-form {
  margin-top: 3.125rem;
}
.van-button {
  margin-top: 6.25rem;
}
</style>
